<template>
	<view class="mine">
		<view class="user-info">
			<view class="left">
				<image style="background-color: #fff;" src="/static/logo.png"></image>
				<view class="user-name">微信用户</view>
			</view>
			<view class="change-comment">
				<image src="/static/images/change.png"></image>
				<navigator open-type="switchTab" url="/pages/index/index">切换为存件</navigator>
			</view>
		</view>

		<view class="info-card">
			<!-- <view class="item">
				<view class="title">
					<image src="/static/icons/phone.png"></image>
					<view class="item-title">登录手机号</view>
				</view>

				<view class="right">
					<view class="text">{{ phone }}</view>
					<uni-icons type="right" color="#666666"></uni-icons>
				</view>
			</view> -->
			<navigator class="item" :url="item.url" v-for="item in navigaterArr" :key="item">
				<view class="title">
					<image :src="item.icon"></image>
					<view class="item-title">{{ item.title }}</view>
				</view>

				<view class="right">
					<view class="text">{{ item.right }}</view>
					<uni-icons type="right" color="#666666"></uni-icons>
				</view>
			</navigator>
		</view>
		<!-- <view class="login-out" @click="loginOut">退出登录</view> -->
	</view>
</template>

<script setup>
import { ref } from 'vue';
// 登出
// function loginOut() {
// 	uni.removeStorageSync('userPhone');
// 	uni.showToast({
// 		title: '退出成功',
// 		duration: 1000
// 	});
// 	setTimeout(() => {
// 		console.log('定时器');
// 		uni.switchTab({
// 			url: '/pages/index/index'
// 		});
// 	}, 1000);
// }

const navigaterArr = [
	// {
	// 	icon: '/subpkg_take/static/guize.png',
	// 	title: '使用说明',
	// 	url: '/subpkg_take/userInstruction/userInstruction'
	// },
	// {
	// 	icon: '/subpkg_take/static/fuwu.png',
	// 	title: '外卖柜用户服务协议',
	// 	url: '/subpkg_take/serviceAgreement/serviceAgreement'
	// },
	// {
	// 	icon: '/subpkg_take/static/yinsi.png',
	// 	title: '隐私条款',
	// 	url: '/subpkg_take/privacyPolicy/privacyPolicy'
	// }
];

// const phone = ref('');
// phone.value = uni.getStorageSync('userPhone').substring(0, 3) + '****' + uni.getStorageSync('userPhone').substring(7);
</script>

<style lang="scss">
.mine {
	padding: 25rpx 20rpx;
	box-sizing: border-box;
	view {
		box-sizing: border-box;
	}
	.user-info {
		padding: 100rpx 0rpx 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left {
			display: flex;
			align-items: center;

			image {
				margin-right: 30rpx;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.user-name {
				font-size: 40rpx;
			}
		}

		.change-comment {
			padding: 0 25rpx;
			background-color: #fefefe;
			height: 80rpx;
			box-shadow: 3rpx 3rpx 20rpx 10rpx #eeeeee;
			line-height: 80rpx;
			border-radius: 50rpx;
			font-size: 35rpx;

			image {
				margin-right: 7rpx;
				width: 35rpx;
				height: 35rpx;
				vertical-align: middle;
			}
			navigator {
				display: inline-block;
			}
		}
	}

	.info-card {
		background-color: #fff;
		border-radius: 28rpx;
		padding: 0rpx 15rpx;
		box-shadow: 3rpx 3rpx 20rpx 10rpx #eeeeee;
		.item {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #e7e7e7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title {
				display: flex;
				.item-title {
					margin-left: 14rpx;
					font-size: 35rpx;
				}

				image {
					vertical-align: middle;
					margin-top: 5rpx;
					width: 50rpx;
					height: 40rpx;
				}
			}
			&:last-child {
				border-bottom: none;
			}
		}

		.right {
			display: flex;
			.text {
				color: #666666;
			}
		}
	}

	// .login-out {
	// 	margin-top: 45rpx;
	// 	background-color: #fff;
	// 	border-radius: 28rpx;
	// 	box-shadow: 3rpx 3rpx 20rpx 10rpx #eeeeee;
	// 	font-size: 36rpx;
	// 	text-align: center;
	// 	height: 95rpx;
	// 	line-height: 95rpx;
	// }
}
</style>
